<template>
	<div>
		<!-- 导航栏 -->
		<MyNavbar title="精彩跟帖"></MyNavbar>

		<!-- 2.0 评论主体 -->
		<div class="list">
			<div class="item" v-for="item in commentList" :key="item.id">
				<div class="head">
					<img :src="item.user.head_img | imgUrl" alt />
					<div>
						<p>{{ item.user.nickname }}</p>
						<span>2021-6-10</span>
					</div>
					<van-button type="primary" size="small" @click="replyFn(item)">回复</van-button>
				</div>
				<!-- 父评论 -->
				<MyContent v-if="item.parent" :comment="item.parent" @reply="replyFn"></MyContent>
				<!-- 评论内容 -->
				<div class="text">{{ item.content }}</div>
			</div>
			<van-divider>到底了~</van-divider>
		</div>
		<!-- 3.0 评论底部 -->
		<MyComment
			ref="MyComment"
			:article="news"
			@reload="reloadFn"
			:replyObj="temp"
			@reset="temp = null"
		></MyComment>

		<van-empty v-if="!commentList.length" description="空空如也" />
	</div>
</template>

<script>
import MyNavbar from '../components/MyNavbar.vue';
import MyComment from '../components/MyComment.vue';
import MyContent from '../components/MyContent.vue';
import { getArticleAPI, getCommentAPI } from '../api/article.js';
export default {
	name: 'Comment',
	components: {
		MyNavbar,
		MyComment,
		MyContent
	},
	async created() {
		// console.log(this.$route.params.id);
		this.news = (await getArticleAPI(this.$route.params.id)).data.data;
		this.reloadFn();
	},
	data() {
		return {
			news: {},
			commentList: [],
			temp: null
		};
	},
	methods: {
		// 更新页面
		async reloadFn() {
			this.commentList = (await getCommentAPI(this.$route.params.id)).data.data;
			// 平滑滚动 - 手机端可用
			window.scrollTo({ top: 0, behavior: 'smooth' });
			this.temp = null;
		},
		// 回复评论
		replyFn(item) {
			console.log(item);
			// 🔔 通过 ref 找到组件实例，调用组件内的方法实现展示文本域
			this.$refs.MyComment.isShow = true;
			// 把当前评论对象传递给底部评论组件内
			this.temp = item;
		}
	}
};
</script>

<style lang="less" scoped>
.list {
	margin-bottom: 100px;
}
.item {
	padding: 10px;
	border-bottom: 1px solid #ccc;
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		> img {
			width: 50/360 * 100vw;
			height: 50/360 * 100vw;
			display: block;
			border-radius: 50%;
		}
		> div {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-left: 10px;
			> span {
				font-size: 12px;
				color: #999;
				line-height: 25px;
			}
		}
		> span {
			color: #999;
			font-size: 13px;
		}
	}
	.text {
		font-size: 14px;
		color: #333;
		padding: 20px 0 10px 0;
	}
}
</style>
